<include file="public/header" />
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">分类</a>
                <a>
                    <cite>分类列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-input-inline layui-show-xs-block">
    <div class="demoTable" style="width: 500px;">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <div class="layui-card-header">
        <button class="layui-btn" onclick="xadmin.open('增加商品','{:url('Goods/editGoods',array('type'=>2))}',1200,800)">
            <i class="layui-icon"></i>添加</button></div>
</div>

<table id="demo" lay-filter="edit"></table>
<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="attr">规格</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

    layui.use(['table','util'], function(){

        var table = layui.table
            ,form = layui.form
            ,util = layui.util;
        //是否启用模板
        var hotTpl = function (d) { //名字需要和上面定义的名字对应上
            var isCkecked = d.is_recommend == "1" ?"checked":"";
            return '<input type="checkbox" lay-filter="is_recommend"  lay-skin="switch" lay-text="是|否" '+ isCkecked +'> ';
        };
        // //是否启用模板
        // var statusTpl = function (d) { //名字需要和上面定义的名字对应上
        //     var la = d.status == "1" ?"checked":"";
        //     var la1 = d.status == "2" ?"checked":"";
        //     var la2 = d.status == "4" ?"checked":"";
        //     var la4 = d.status == "5" ?"checked":"";
        //    var html ='<input type="radio" lay-filter="status"  value="1" title="草稿"'+ la +'> ' +
        //        '<input type="radio" lay-filter="status"   value="2" title="待审核"'+ la1 +'> ' +
        //        '<input type="radio" lay-filter="status"  value="4" title="驳回"'+ la2 +'> ' +
        //        '<input type="radio" lay-filter="status"   value="5" title="通过"'+ la4 +'>';
        //     return  html;
        // };
        // //是否启用模板
        var statusTpl = function (d) { //名字需要和上面定义的名字对应上
            var isCkecked = d.status == "已发布" ?"checked":"";
            return '<input type="checkbox" lay-filter="status"  lay-skin="switch" lay-text="已发布|下架" '+ isCkecked +'> ';
        };
        var imgTpl =function (d){
            var img = d.thumb;
            return '<img src="'+ img +'"> ';
        }
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: "{:url('/goods/productList')}" //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,width:'100%'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,totalRow: true // 开启合计行
            ,response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '产品名称',width:150, }
                ,{field: 'thumb', title: '产品图片',width:150, templet:imgTpl,unresize: true}
                ,{field: 'cate_name', title: '商品类型',width:100, }
                ,{field: 'price', title: '价格',width:200, }
                ,{field: 'discount_price', title: '折扣价',width:80, }
                ,{field: 'goods_sn', title: '商品货号',width:80, }
                ,{field: 'recommend', title: '推荐商品',width:80, }
                ,{field: 'stock', title: '库存',width:80, }
                ,{field: 'sort', title: '排序',width:80, }
                ,{field: 'status', title: '开关',width:120,templet:statusTpl,unresize: true}
                ,{field: 'create_time', title: '创作时间',width:200,  sort: true}
                ,{fixed: 'right', title:'操作',  width:200,toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'

            // ,parseData: function(res){ //res 即为原始返回的数据
            // return {
            //     "code": 0, //解析接口状态
            //     "msg": res.message, //解析提示文本
            //     "count": res.total, //解析数据长度
            //     "data": res.data.item //解析数据列表
            // };
            // }
        });
        //触发单元格工具事件
        form.on('switch(is_recommend)', function(data){ // 双击 toolDouble
            var id = data.othis.parents('tr').find("td").eq(1).text();
            var is_recommend = this.checked ? '1' : '0'
            $.ajax({
                type: 'post',
                url:"{:url('/Goods/updateStatus')}",
                dataType: 'json',
                data:{id:id,is_recommend:is_recommend},
                success: function(data){
                    // if(!$(obj).hasClass('no') && !$(obj).hasClass('yes'))
                    if(data.code==200){
                        setTimeout(

                            layer.msg('success', {icon: 1,time:1000}),
                            2000);

                    }else {
                        layer.msg('异常', {icon: 2});
                    }

                }
            });
        });

        //触发单元格工具事件 修改状态
        form.on('switch(status)', function(data){ // 双击 toolDouble
            var id = data.othis.parents('tr').find("td").eq(1).text();
            var status = this.checked ? '5' : '4'
            $.ajax({
                type: 'post',
                url:"{:url('/Goods/updateStatus')}",
                dataType: 'json',
                data:{id:id,status:status},
                success: function(data){
                    // if(!$(obj).hasClass('no') && !$(obj).hasClass('yes'))
                    if(data.code==200){
                        setTimeout(

                            layer.msg('success', {icon: 1,time:1000}),
                            2000);

                    }else {
                        layer.msg('异常', {icon: 2});
                    }

                }
            });
        });


        //触发单元格工具事件
        table.on('tool(edit)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            var id= obj.data.id;
            switch (obj.event){
                case 'del':
                    // 删除按钮
                    layer.confirm('确认删除？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $.ajax({
                            type: 'post',
                            url: "{:url('/Goods/goodsDel')}",
                            data : {id:obj.data.id},
                            dataType: 'json',
                            success: function (data) {

                                if (data.code == 200) {
                                    layer.msg(data.msg, {icon: 1,time:100});
                                    obj.del();
                                } else {
                                    layer.alert(data.msg, {icon: 2});
                                }
                            }
                        })
                    }, function () {
                        layer.closeAll();
                    });
                    break;
                case 'edit':
                    layer.open({
                        title: '编辑',
                        type: 2,
                        area: ['90%','90%'],
                        content:  "{:url('/Goods/editGoods')}?id="+id,
                    });
                    break;
                case 'attr':
                    layer.open({
                        title: '查看',
                        type: 2,
                        area: ['90%','90%'],
                        content:  "{:url('/Goods/editAttr')}?id="+id,
                    });
                    break;
            }
        })
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        keyword: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>